<!-- 一键平仓面板 -->
<template>
	<view class="onKeyClearPanel">
		<u-popup :show="isShow" :customStyle="{
				background: '#fff',
				borderRadius:'48rpx 48rpx 0 0'
		}" @close="close" @open="open">
			<view class="popup-content">
				<view class="title">一键平仓</view>
				<view class="pc-tip">一键平仓后平台不会返还保证金，您确定要执行此操作吗？</view>
				<view class="psw-tip">请验证密码</view>
				<view class="input-row-item">
					<view class="input-wrap">
						<image src="@/static/login/suo.png" mode="aspectFill"></image>
						<view class="input-box">
							<input type="password" placeholder="请输入验证密码" maxlength="20" v-model="password"
								placeholder-class="placeholderClass" />
						</view>
					</view>
				</view>
				<view class="operate-btns">
					<view class="btn btn1" @click.stop="handleConfrim">确定</view>
					<view class="btn btn2" @click.stop="close">取消</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		orderClosePositions
	} from "@/api/order.js"
	export default {
		data() {
			return {
				isShow: false,
				userInfo: null,
				password: "",
				option: null
			};
		},

		methods: {
			handleConfrim() {
				if (this.isEmpty(this.password)) {
					uni.showToast({
						title: "请输入密码",
						icon: "none"
					})
					return
				}

				uni.showLoading({
					title: "操作中...",
					mask: true
				})
				/**
				 * @param {} level  all；sub_account；strategy；order
				 * @param {String} password 当前子账号密码
				 */
				orderClosePositions({
					...this.option,
					password: this.password
				}).then(res => {
					uni.showToast({
						title: "平仓成功",
					})
					this.$emit("complete");
					this.close();
				})
				.catch(res => {
					console.log("111111111111111111111")
					console.log(res)
				})
			},

			/**
			 * @param {Object} opts
			 * @param {String} opts.level 必传，等级，all；sub_account；strategy；order
			 * @param {Number} opts.subAccountId 子账号id
			 */
			async show(opts) {
				this.option = opts;
				this.isShow = true;
				this.password = ""
			},
			close() {
				this.isShow = false
			},
			open() {}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-popup {
		position: fixed;
		z-index: 999;
	}
	.onKeyClearPanel {
		.popup-content {
			min-height: 600rpx;
			position: relative;
			text-align: center;
			color: $font-color;
			padding: 70rpx 40rpx 40rpx 40rpx;

			.title {
				font-size: 34rpx;
				font-weight: 600;
				line-height: 40rpx;
			}

			.pc-tip {
				font-size: 30rpx;
				font-weight: 400;
				line-height: 35rpx;
				padding: 30rpx 0 48rpx 0;
			}

			.psw-tip {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 30rpx;
				color: #7B828A;

			}

			.input-row-item {
				margin: 20rpx 0 40rpx 0;

				.input-wrap {
					height: 96rpx;
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					background-color: #F4F5F7;

					image {
						width: 40rpx;
						height: 40rpx;
						margin: 0 28rpx;
					}

					.input-box {
						height: 100%;
						flex: 1;
						padding-right: 28rpx;

						input {
							border: 0;
							width: 100%;
							height: 100%;
							font-size: 28rpx;
							text-align: left;
						}
					}

					.yzm-btn {
						width: 196rpx;
						height: 76rpx;
						line-height: 76rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #26282B;
						text-align: center;
						background-color: #FFE269;
						border-radius: 12rpx;
						margin-right: 10rpx;
					}

					.placeholderClass {
						color: #969696;
						font-size: 28rpx;
					}
				}
			}

			.operate-btns {
				display: flex;
				align-items: center;

				.btn {
					flex: 1;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: 600;
					border-radius: 12rpx;
					text-align: center;
				}

				.btn1 {
					background-color: $btn-bg-color;
					margin-right: 46rpx;
				}

				.btn2 {
					background-color: #EEF1F6;
				}
			}
		}
	}
</style>